<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" inline :model="page">
        <el-form-item label="人员搜索：">
          <el-input v-model="page.userName" class="elinput1" clearable placeholder="请输入" />
          <!-- <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button> -->
        </el-form-item>
        <el-form-item label="角色：">
          <el-select v-model="page.isRepair" placeholder="请选择活动区域">
            <el-option label="运营员" value="false" />
            <el-option label="维修员" value="true" />
          </el-select>
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-table
        :data="queryList"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="userName"
          label="人员名称"
        />
        <el-table-column
          prop="roleName"
          label="角色"
        />
        <el-table-column
          prop="mobile"
          label="联系电话"
        />
        <el-table-column
          prop="workCount"
          label="完成工单（本月）"
        />
        <el-table-column
          prop="progressTotal"
          label="进行中工单"
        />
        <el-table-column
          prop="cancelCount"
          label="拒绝工单（本月）"
        />
        <el-table-column label="操作" width="100">
          <template #default="{row}">
            <el-link type="primary" @click="seeDetails(row)">查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 查看详情对话框 -->
    <el-dialog
      title="人员详情"
      :visible.sync="dialogVisible"
      width="35%"
    >
      <div>
        <div class="headtxt">
          <div class="txt">人员名称：{{ addFrom.userName }}</div>
          <div class="txt">角色：{{ addFrom.roleName }}</div>
          <div class="txt">联系电话：{{ addFrom.mobile }}</div>
          <div class="txt">负责区域：{{ addFrom.regionName }}</div>
        </div>
        <div>
          <el-row class="headbox">
            <el-col :span="4"> <div class="teshu">  11</div></el-col>
            <el-col :span="5">总工单数</el-col>
            <el-col :span="5">拒绝工单</el-col>
            <el-col :span="5">完成工单</el-col>
            <el-col :span="5">进行中工单</el-col>
          </el-row>
          <el-row class="headbox1">
            <el-col :span="4"> 本周</el-col>
            <el-col :span="5">{{ z.cancelCount }}</el-col>
            <el-col :span="5">{{ z.total }}</el-col>
            <el-col :span="5">{{ z.progressTotal }}</el-col>
            <el-col :span="5">{{ z.workCount }}</el-col>
          </el-row>
          <el-row class="headbox1">
            <el-col :span="4"> 本月</el-col>
            <el-col :span="5">{{ y.cancelCount }}</el-col>
            <el-col :span="5">{{ y.total }}</el-col>
            <el-col :span="5">{{ y.progressTotal }}</el-col>
            <el-col :span="5">{{ y.workCount }}</el-col>
          </el-row>
          <el-row class="headbox3">
            <el-col :span="4"> 本年</el-col>
            <el-col :span="5">{{ n.cancelCount }}</el-col>
            <el-col :span="5">{{ n.total }}</el-col>
            <el-col :span="5">{{ n.progressTotal }}</el-col>
            <el-col :span="5">{{ n.workCount }}</el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { workloadAPI, personnelDetails, weekAPI, monthAPI, yearAPI } from '@/api/user.js'
export default {
  data() {
    return {
      page: {
        userName: '',
        pageIndex: 1,
        pageSize: 10,
        isRepair: ''
      },
      totalCount: null,
      queryList: [],
      dialogVisible: false,
      addFrom: {},
      z: {

      },
      y: {

      },
      n: {

      }
    }
  },
  created() {
    this.gitworkloadAPI()
  },
  methods: {
    inquire() {
      this.gitworkloadAPI()
    },
    async gitworkloadAPI() {
      const res = await workloadAPI(this.page)
      this.queryList = res.currentPageRecords
      this.totalCount = res.totalCount - 0
    },
    handleSizeChange(newSize) {
      this.page.pageSize = newSize
      this.gitworkloadAPI()
    },
    handleCurrentChange(newNum) {
      this.page.pageIndex = newNum
      this.gitworkloadAPI()
    },
    async seeDetails(row) {
      this.dialogVisible = true
      const res = await personnelDetails(row.userId)
      this.addFrom = res
      const res1 = await weekAPI()
      const res2 = await monthAPI()
      const res3 = await yearAPI()
      this.z = res1
      this.y = res2
      this.n = res3
      console.log(res1, '周')
      console.log(res2, '月')
      console.log(res3, '年')
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.el-select{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
   ::v-deep .el-select__caret{
    margin-top: 5px;
   }
}
.headtxt{
  width: 100%;
  height: 86px;
    padding: 19px 19px 0;
    background: #f3f6fb;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    .txt {
      width: 33.33%;
    }
}
.headbox{
  height: 40px;
  background-color: #fff;
  border-top: 1px solid #d8dde3;
    border-left: 1px solid #d8dde3;
    margin-top: 26px;
    background: #f7f8fd;
    .el-col{
      line-height: 40px;
    border-right: 1px solid #d8dde3;
    text-align: center;
    }
    .teshu{
      opacity: 0;
    }
}
.headbox1{
  height: 40px;
  background-color: #fff;
  border-top: 1px solid #d8dde3;
    border-left: 1px solid #d8dde3;

    .el-col{
      line-height: 40px;
    border-right: 1px solid #d8dde3;
    text-align: center;
    }
    .teshu{
      opacity: 0;
    }
}
.headbox3{
  height: 40px;
  background-color: #fff;
  border-top: 1px solid #d8dde3;
    border-left: 1px solid #d8dde3;
    border-bottom: 1px solid #d8dde3;
    .el-col{
      line-height: 40px;
    border-right: 1px solid #d8dde3;
    text-align: center;
    }
    .teshu{
      opacity: 0;
    }
}
</style>
